<template>
  <view :style="colorStyle">
    <tabs :list="tabList" @tablistChange="tablistChange" />
    <block v-if="!loadingPage">
      <x-skeleton
        type="list"
        :loading="true"
        v-for="(item, index, key) in 10"
        :key="key"
      >
        <view>列表</view>
      </x-skeleton>
    </block>
    <view class="couponModule" v-if="loadingPage">
      <view class="info1">
        <view v-for="(item, index, key) in list" :key="key" class="list">
          <view
            class="flex aitems sellerInfo"
            v-if="item.sellerId > 0"
            @click.stop="gourl(`/pages/seller/info?id=${item.sellerId}`)"
          >
            <image class="icon1" :src="item.sellerLogo" mode="aspectFill" />
            <view class="name c1F1F1F f32 fontWeight">
              {{ item.sellerName }}</view
            >
            <image class="icon2" src="@/static/img15.png" mode=""></image>
          </view>
          <view class="flex aitems">
            <view class="left">
              <view class="price">
                <span class="unit">￥</span>
                <span class="num">{{ item.money }}</span>
              </view>
              <view class="price1" v-if="item.minPrice > 0">
                满{{ item.minPrice }}元使用
              </view>
              <view class="price1" v-if="item.minPrice <= 0"> 无门槛 </view>
              <view class="label"> {{ couponsUseType[item.useType] }} </view>
            </view>
            <view class="border"></view>
            <view class="right flex aitems between">
              <view class="couponinfo">
                <view class="name fontWeight"> {{ item.name }} </view>
                <!-- <view class="time" v-if="item.isFixedTime == 1">
                有效期至 {{ item.useEndTime }}
              </view>
              <view class="time" v-if="item.isFixedTime == 0">
                有效期至 {{ item.day }}
              </view> -->
                <view
                  class="log flex aitems"
                  @click="couponDescriptionChange(item)"
                >
                  <u-icon name="search" size="22" color="#525252"></u-icon>
                  <span>查看使用说明</span>
                </view>
              </view>
              <view
                class="couponbtn"
                @click="save(item)"
                :style="{ background: `${item.isGet == 1 ? '#ccc' : ''}` }"
              >
                {{ couponIsGet[item.isGet] }}
              </view>
            </view></view
          >
        </view>
      </view>
    </view>

    <nodata v-if="list.length == 0" />
    <view class="" style="height: 100rpx"> </view>

    <u-popup
      mode="bottom"
      :safeAreaInsetBottom="false"
      :show="show"
      :overlayStyle="{ 'touch-action': 'none' }"
      bgColor="transparent"
      @close="show = false"
    >
      <coupon-description :value="info.brief" @closeChange="show = false" />
    </u-popup>
  </view>
</template>

<script>
import { couponPage, couponReceive, updateParent } from "@/servers/servers";
import { HTTP_STATUS } from "@/servers/config";
import colors from "@/mixins/color";
import { getGloBalData, getStorage, getToken } from "../../utils/storage";
import { loading, go, msg } from "@/utils/wxAPI";
import { couponsUseType, couponIsGet } from "@/keys/keys";
import { formatDate } from "@/utils/util";
import { getEnv } from "../../utils/env";
import { handleLoopCallBack } from "../../utils/util";
export default {
  mixins: [colors],
  data() {
    return {
      info: {},
      show: false,
      couponsUseType,
      couponIsGet,
      loadingPage: false,
      list: [],
      total: 0,
      current: 1,
      tabList: [
        {
          name: "平台券",
          id: 1,
        },
        {
          name: "商品券",
          id: 2,
        },
        {
          name: "商家券",
          id: 3,
        },
      ],
      tabListindex: 0,
      options: {},
    };
  },
  async onLoad(options) {
    this.options = options;
    if (getToken()) {
      await this.couponPage();
      if (this.options.uid) {
        updateParent({
          id: this.options.uid,
        });
      }
    } else {
      handleLoopCallBack(async () => {
        this.couponPage();
        if (this.options.uid) {
          updateParent({
            id: this.options.uid,
          });
        }
      });
      // #ifdef H5
      if (getEnv() == "H5") {
        uni.reLaunch({
          url: "/pages/login/login",
        });
      }
      // #endif
    }
  },
  methods: {
    couponDescriptionChange(info) {
      this.info = info;
      this.show = true;
    },
    tablistChange(index) {
      this.tabListindex = index;
      this.current = 1;
      this.couponPage();
    },
    async couponPage() {
      loading();
      let { data } = await couponPage({
        current: this.current,
        size: 10,
        useType: this.tabList[this.tabListindex].id,
        status: 1,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        list.map((item) => {
          // if (item.isFixedTime == 0) {
          //   let time1 =
          //     new Date(item.createTime.replace(/-/g, "/")).getTime() +
          //     1000 * 60 * 60 * 24 * item.day;
          //   item.day = formatDate(time1).dateValue;
          // }
        });
        this.total = data.data.total;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    async save(item) {
      // #ifdef MP-WEIXIN
      if (!getGloBalData("is_authorization")) {
        return go(`/pages/reg/reg`);
      }
      // #endif
      // #ifdef H5
      if (getEnv() == "WX_PUBLIC") {
        if (!getStorage("is_authorization")) {
          return go(`/pages/reg/reg`);
        }
      }
      // #endif
      loading();
      let { data } = await couponReceive({
        id: item.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        msg(data.msg);
        this.current = 1;
        this.couponPage();
      }
    },
    gourl(url) {
      go(url);
    },
  },
  onReachBottom() {
    if (this.list.length == this.total) return;
    this.current += 1;
    this.couponPage();
  },
  onPullDownRefresh() {
    this.current = 1;
    this.couponPage();
  },
  onShareAppMessage: function (e) {
    return {
      title: "领券中心",
      path: `/pages/coupon/coupon?uid=${getGloBalData("userinfo").id}`,
    };
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.couponModule {
  position: relative;
  overflow: hidden;
  margin: 30rpx 30rpx 0;

  .info1 {
    position: relative;
    z-index: 1;

    .list {
      padding: 20rpx 32rpx;
      background: #fff;
      border-radius: 28rpx;
      margin: 0 0 24rpx 0;
      .sellerInfo {
        margin: 0 0 34rpx 0;

        .icon1 {
          width: 40rpx;
          height: 40rpx;
        }

        .name {
          margin: 0 12rpx 0 8rpx;
        }

        .icon2 {
          width: 32rpx;
          height: 32rpx;
        }
      }

      .left {
        width: 160rpx;
        text-align: center;

        .price {
          color: #1f1f1f;
          font-weight: bold;

          .unit {
            font-size: 40rpx;
          }

          .num {
            font-size: 64rpx;
          }
        }

        .price1 {
          font-size: 24rpx;
          color: #1f1f1f;
        }

        .label {
          margin: 16rpx auto 0;
          color: var(--view-theme);
          font-size: 24rpx;
          border-radius: 10rpx;
          border: 2rpx solid var(--view-theme);
          background: var(--view-minorColorT);
          width: 140rpx;
          height: 42rpx;
          line-height: 42rpx;
          text-align: center;
        }
      }

      .border {
        border-left: 2rpx dashed #858585;
        width: 2rpx;
        height: 160rpx;
        margin: 0 20rpx;
      }

      .right {
        width: calc(100% - 160rpx - 44rpx);

        .couponinfo {
          width: 250rpx;

          .name {
            color: #1f1f1f;
            font-size: 32rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .time {
            color: #525252;
            font-size: 24rpx;
            margin: 24rpx 0 0;
          }

          .log {
            color: #525252;
            font-size: 24rpx;
            margin-top: 8rpx;

            span {
              margin-left: 4rpx;
            }
          }
        }

        .couponbtn {
          border-radius: 40rpx;
          background: var(--view-theme);
          display: flex;
          padding: 12rpx 30rpx;
          justify-content: center;
          align-items: center;
          gap: 10rpx;
          color: #fff;
          font-size: 24rpx;
          //   margin-left: 0rpx;
        }
      }
    }
  }
}

image {
  display: flex;
}
</style>
